<script setup>
import { ref } from 'vue'
import { disableBlackTheme, formattedDataByLetterInfo } from '../utils/tool'
import {
  letterDelSaveInfoService,
  letterGetCountOnCurUserService,
  letterGetSaveInfoService
} from '@/api/letter'
import { Delete, Edit, Search, CaretTop } from '@element-plus/icons-vue'
import emitter from '@/utils/event'
import { ZlMessage } from '@/utils/message'
import { useRouter } from 'vue-router'
disableBlackTheme()

// 加载动画
const loading = ref(true)

// 回到顶部
const goTop = () => {
  emitter.emit('go-top')
}

// 获取信件
const letterList = ref([])
// 获取暂存的信件
const getSaveInfo = async () => {
  loading.value = true
  const res = await letterGetSaveInfoService()
  // 格式化数据
  formattedDataByLetterInfo(res.data.data)
  letterList.value = res.data.data
  loading.value = false
}
getSaveInfo()

// 获取个数
const count = ref({
  saveCount: 0
})
const getCount = async () => {
  const res = await letterGetCountOnCurUserService()
  count.value = res.data.data
}
getCount()

// 查询框
const select = ref('')
const onSelect = async () => {
  loading.value = true
  const res = await letterGetSaveInfoService(select.value)
  // 格式化
  formattedDataByLetterInfo(res.data.data)
  letterList.value = res.data.data
  loading.value = false
}

// 删除暂存的信
const dialogVisible = ref(false)
const tmpId = ref(-1)
const onDelete = async (id) => {
  // 如果弹框打开，说明是用户点击了确认按钮
  if (dialogVisible.value == true) {
    const res = await letterDelSaveInfoService(tmpId.value)
    if (res.data.data) {
      getCount()
      ZlMessage.success('删除成功')
    } else {
      ZlMessage.error('删除失败')
    }
    // 重新获取数据
    getSaveInfo()
    // 关闭弹框
    dialogVisible.value = false
  } else {
    // 走到这，说明弹框并没有被打开，用户单击的是删除按钮，此时应该打开弹框提示用户
    dialogVisible.value = true
    tmpId.value = id
  }
}

// 单击修改的按钮
const router = useRouter()

const onModify = (id) => {
  // window.open('/letter/write-modify?id=' + id, '_blank')
  router.push('/letter/write-modify?id=' + id)
}
</script>
<template>
  <el-dialog v-model="dialogVisible" title="警告" width="500" align-center>
    <span>删除暂存信件后不可恢复, 你确定要执行该操作吗？</span>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="onDelete()"> 确认 </el-button>
      </div>
    </template>
  </el-dialog>

  <!-- 去往顶部按钮 -->
  <el-button
    style="position: fixed; bottom: 80px; right: 20px"
    @click="goTop"
    type="primary"
    :icon="CaretTop"
    size="large"
    circle
  />

  <!-- 暂存箱标题 -->
  <div
    style="
      padding-bottom: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    "
  >
    <h2>暂存箱</h2>
    <div>
      <a-tooltip content="暂存箱最多保存50封信件哦！" background-color="#333">
        <el-text>当前暂存信件数量：</el-text>
        <el-text type="primary">{{ count.saveCount }}</el-text></a-tooltip
      >
    </div>
  </div>

  <!-- 搜索框 -->
  <div>
    <el-input
      v-model="select"
      style="width: 100%; border-radius: 20px"
      placeholder="标题 or 内容"
      @keyup.enter="onSelect()"
    />
    <el-button
      style="
        position: relative;
        top: -32px;
        left: 96%;
        border: none;
        background: none;
      "
      :icon="Search"
      circle
      @click="onSelect()"
    />
  </div>

  <!-- 内容渲染 -->
  <div
    style="width: 100%"
    class="content-list"
    v-loading="loading"
    v-if="letterList.length > 0"
  >
    <el-card
      class="card"
      shadow="hover"
      v-for="item in letterList"
      :key="item.id"
    >
      <div
        style="
          display: flex;
          justify-content: space-between;
          align-items: center;
        "
      >
        <h2
          style="
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin-top: 0;
          "
        >
          {{ item.title }}
        </h2>
        <div>
          <el-button :icon="Edit" @click="onModify(item.id)" circle />
          <el-button :icon="Delete" circle @click="onDelete(item.id)" />
        </div>
      </div>
      <p style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis">
        {{ item.contentText }}
      </p>
      <div
        style="
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
        "
      >
        <div>
          是否公开信：<span style="font-weight: 700">{{
            item.isPublic ? '是' : '否'
          }}</span>
        </div>
        <div>
          <span style="margin-right: 20px">
            <el-text>上一次保存时间：{{ item.writeTime }}</el-text>
          </span>
          <span
            ><el-text>发出时间：{{ item.sendTime }} </el-text></span
          >
        </div>
      </div>
    </el-card>
  </div>
  <a-empty v-else />
</template>
<style scoped>
.card {
  width: 100%;
  border-radius: 10px;
  margin-bottom: 30px;
  background-color: #909399;
  border-radius: 20px;
  background-image: linear-gradient(120deg, #eef0f4 0%, #eef0f4 100%);
}
</style>
